<template>
  <div class="app-container TabScroll home-full home-profile ">
    <div class="filter-container" style="background: #ffffff;padding:1px 20px;">
      <h4 class="at"><span>ID{{ info.general.id }}</span><span>{{ info.general.tcName }}</span><span>{{ info.general.lastName }} {{ info.general.firstName }}</span><span>{{ info.general.gender === 'F' ? 'Female':'Male' }}</span><span>{{ info.general.age }}</span></h4>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- Reminder -->
      <el-tab-pane label="General Information" name="tab1">
        <el-row v-if="info.general" class="el-h155">
          <el-col style="padding: 10px 20px;" :sm="12" :md="5" :lg="4" :xl="4">
            <a v-if="info.general.headImg" target="_blank" :href="info.general.headImg" :style="'width: 130px;height: 130px;display: block;background-size: cover;border-radius: 5px;margin: auto;background-image: url('+info.general.headImg+')'"></a>
          </el-col>
          <el-col :sm="12" :md="9" :lg="7" :xl="7">
            <div class="ul"><span>中文名稱</span>{{ info.general.tcName }}</div>
            <div class="ul"><span>First Name:</span>{{ info.general.firstName }}</div>
            <div class="ul"><span>Last Name:</span>{{ info.general.lastName }}</div>
            <div class="ul"><span>Gender:</span>{{ info.general.gender }}</div>
          </el-col>
          <el-col :sm="12" :md="10" :lg="6" :xl="6">
            <div class="ul"><span>Date of Birth:</span>{{ info.general.birthDate | dateFormat }}</div>
            <div class="ul"><span>Age:</span>{{ info.general.age }}</div>
            <div class="ul"><span>Contact Number:</span>{{ info.general.contactNumber }}</div>
            <div class="ul"><span>Email address:</span>{{ info.general.emailAddress }}</div>
          </el-col>
          <el-col :sm="12" :md="12" :lg="7" :xl="7">
            <div class="ul"><span>Emergency Contact:</span>{{ info.general.emergencyContact }}</div>
            <div class="ul"><span>Emergency Tel:</span>{{ info.general.emergencyTel }}</div><!-- No-->
            <div class="ul"><span>Status:</span>{{ info.userStatus | userStatusFormat }}<el-popover
              placement="bottom"
              width="280"
              trigger="click"
            >
              <el-table :data="info.statusLogs" max-height="250">
                <el-table-column width="120" label="Date" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.recordDate | dateFormat }}</span>
                  </template>
                </el-table-column>
                <el-table-column width="130" property="info" label="Sport" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.status | userStatusFormat }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <i slot="reference" class="el-icon-date text-green" style="margin-left: 10px" />
            </el-popover></div><!-- No-->
            <div class="ul"><span>Medical Insurance:</span>{{ info.insurance }}</div><!-- No-->
          </el-col>
        </el-row>
        <!-- 2 -->
        <el-row v-if="info.userBody" class="el-h280" style="margin-top: 20px;">

          <el-col :sm="12" :md="24" :lg="6" :xl="8">
            <div class="ul"><span>Current sport:</span>{{ info.userBody.current }}<el-popover
              placement="bottom"
              width="280"
              trigger="click"
            >
              <el-table :data="info.currentSportLog" max-height="250">
                <el-table-column width="120" label="End Date" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.recordDate | dateFormat }}</span>
                  </template>
                </el-table-column>
                <el-table-column width="130" property="info" label="Sport" align="center"></el-table-column>
              </el-table>
              <i slot="reference" class="el-icon-date text-green" style="margin-left: 10px" />
            </el-popover></div>
            <div class="ul"><span>Sport Classification / Status: </span>
              {{ info.userBody.sportClassification || '-' }} / {{ info.userBody.sportClassificationStatus || '-' }}

            </div>
            <div class="ul"><span>Since:</span>{{ info.userBody.since }}</div>
            <div class="ul" style="white-space: initial;"><span>Remarks:</span><div class="remarks">{{ info.userBody.remarks }}</div></div>
          </el-col>
          <el-col :sm="12" :md="12" :lg="6" :xl="6">
            <!-- <div class="ul"><span>Disable:</span>Yes</div> -->
            <div class="ul"><span>Type of Disability:</span>{{ info.userBody.disableType }}</div>
            <div class="ul"><span>Affecting area:</span>{{ info.userBody.affectingArea }}</div>
            <div class="ul"><span>Ambulatory:</span>{{ info.userBody.ambulatory }}</div>
            <div class="ul"><span>Preliminary Disability:</span>{{ info.userBody.preliminary}}</div>
            <div class="ul"><span>Secondary Disability:</span>{{ info.userBody.secondary }}</div>
            <!-- <div class="ul"><span>Position:</span>Head Coach</div> -->
          </el-col>
          <el-col :sm="12" :md="12" :lg="5" :xl="3">
            <div class="ul"><span>Weight(KG):</span>{{ info.userBody.weight }}</div>
            <div class="ul"><span>Blood Type:</span>{{ info.userBody.bloodType }}</div>
            <div class="ul"><span>Height(CM):</span>{{ info.userBody.height }}</div>
            <div class="ul"><span>T-Shirt:</span>{{ info.userBody.tShirt }}</div>
            <div class="ul"><span>Jacket:</span>{{ info.userBody.jacket }}</div>
            <div class="ul"><span>Pants:</span>{{ info.userBody.pants }}</div>
            <div class="ul"><span>Shoes:</span>{{ info.userBody.shoes }}</div>
            <div class="ul"><span>Special Meal:</span>{{ info.userBody.specialMeal }}</div>
          </el-col>
          <el-col :sm="12" :md="24" :lg="7" :xl="7">
            <h4 style="margin: 0;">Training Grant</h4>
            <table v-if="info.userBody.trainingGrant" class="basic-table" border="0" cellspacing="0" cellpadding="0">
              <thead align="center">
                <tr>
                  <th/>
                  <th>Category</th>
                  <th>Support/Month(HK$)</th>
                </tr>
              </thead>
              <tbody align="center">
                <tr v-for="item in info.userBody.trainingGrant" :key="item.name">
                  <td style="color: #ACB8C8;">{{ item.name }}</td>
                  <td>{{ item.category }}</td>
                  <td>{{ item.supportMonth }}</td>
                </tr>
              </tbody>
            </table>
            <div v-else style="color: #ACB8C8;margin-top: 10px;margin-left: 20px">No Data</div>
          </el-col>
        </el-row>
        <h2>Position and Qualification</h2>
        <el-table
          v-loading="infoListLoading"
          :data="info.positionQualification"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="center" label="Period" width="95">
            <template slot-scope="scope">
              {{ scope.row.period }}
            </template>
          </el-table-column>
          <el-table-column label="Organization">
            <template slot-scope="scope">
              {{ scope.row.organization }}
            </template>
          </el-table-column>
          <el-table-column label="機構">
            <template slot-scope="scope">
              {{ scope.row.mechanism }}
            </template>
          </el-table-column>
          <el-table-column label="Position / Qualification">
            <template slot-scope="scope">
              {{ scope.row.profession }}
            </template>
          </el-table-column>
          <el-table-column label="公職 / 資歷">
            <template slot-scope="scope">
              {{ scope.row.seniority }}
            </template>
          </el-table-column>
          <el-table-column label="Remarks">
            <template slot-scope="scope">
              {{ scope.row.remarks }}
            </template>
          </el-table-column>
          <el-table-column label="備註">
            <template slot-scope="scope">
              {{ scope.row.descInfo }}
            </template>
          </el-table-column>
        </el-table>

        <h2>Honours and Awards</h2>
        <el-table
          v-loading="infoListLoading"
          :data="info.honoursAwards"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          style="margin-bottom: 1.66em;"
        >
          <el-table-column align="center" label="Year" width="95">
            <template slot-scope="scope">
              {{ scope.row.years }}
            </template>
          </el-table-column>
          <el-table-column label="Organizer">
            <template slot-scope="scope">
              {{ scope.row.organizer }}
            </template>
          </el-table-column>
          <el-table-column label="主辦單位">
            <template slot-scope="scope">
              {{ scope.row.department }}
            </template>
          </el-table-column>
          <el-table-column label="Honour / Award">
            <template slot-scope="scope">
              {{ scope.row.reputation }}
            </template>
          </el-table-column>
          <el-table-column label="榮譽 / 獎項">
            <template slot-scope="scope">
              {{ scope.row.prize }}
            </template>
          </el-table-column>
          <el-table-column label="Remarks">
            <template slot-scope="scope">
              {{ scope.row.remarks }}
            </template>
          </el-table-column>
          <el-table-column label="備註">
            <template slot-scope="scope">
              {{ scope.row.descInfo }}
            </template>
          </el-table-column>
        </el-table>
        <!-- <div style="text-align: center;margin-top:20px;">
          <router-link :to="'/athletes/index'">
            <el-button type="success" size="medium">Back</el-button>
          </router-link>
        </div> -->

        <el-row style="margin-top:1.66em;" v-if="info.private">
          <el-col :sm="24" :md="24" :lg="24" :xl="24">
            <div class="ul"><span>Historical Background: </span></div>
            <div class="ul">{{ info.general.historicalBackgroud }}</div>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane v-if="userType === 'SUPER_ADMIN'" label="Private Information" name="tab2">

        <!-- 2 -->
        <el-row v-if="info.identity" class="el-h155" style="margin-top:1.66em;">
          <el-col :sm="12" :md="8" :lg="5" :xl="5">
            <div class="ul"><span>HK ID no.:</span>{{ info.identity.hkId }}</div>
            <div class="ul"><span>Issue Date:</span>{{ info.identity.issueDate | dateFormat }}</div>
            <div class="ul"><span>Place of Issue:</span>{{ info.identity.placeIssued }}</div>
            <div class="ul"><span>Date of Issue:</span>{{ info.identity.hkIssueDate | dateFormat }}</div>
          </el-col>
          <el-col :sm="12" :md="8" :lg="7" :xl="7">
            <div class="ul"><span>Place of Birth:</span>{{ info.identity.placeBirth }}</div>
            <div class="ul"><span>Date of Resided in HK:</span>{{ info.identity.residedHk | dateFormat }}</div>
            <!-- <div class="ul hide"><span>Leave Letter Request:</span>{{info.Identity.govemmentDepartment}}</div>-->
          </el-col>
          <el-col :sm="12" :md="8" :lg="6" :xl="6">
            <div class="ul"><span>Home Permit no.:</span>{{ info.identity.homePermit }}</div>
            <div class="ul"><span>Expiry Date:</span>{{ info.identity.homeExpiry | dateFormat }}</div>
            <div class="ul"><span>Place of Issue:</span>{{ info.identity.homePlace }}</div>
            <div class="ul"><span>Date of Issue:</span>{{ info.identity.homeIssueDate | dateFormat }}</div>
          </el-col>
          <el-col :sm="12" :md="8" :lg="6" :xl="6">
            <div class="ul"><span>Passport no.:</span>{{ info.identity.passport }}</div>
            <div class="ul"><span>Expiry Date:</span>{{ info.identity.passportExpiry | dateFormat }}</div>
            <div class="ul"><span>Country of Passport:</span>{{ info.identity.passportCountry }}</div>
            <div class="ul"><span>Date of Issue:</span>{{ info.identity.passportIssueDate | dateFormat }}</div>
          </el-col>
        </el-row>

        <el-row style="margin-top:1.66em;" v-if="info.private">
          <el-col :sm="24" :md="24" :lg="24" :xl="24">
            <div class="ul"><span>Home Address: </span>{{ info.general.enAddress }}</div>
            <div class="ul"><span>中文住址: </span>{{ info.general.tcAddress }}</div>
          </el-col>
        </el-row>

        <el-row v-if="info.private" class="el-h155" style="margin-top:1.66em;">
<!--          <el-col style="padding: 10px 20px;" :sm="24" :md="24" :lg="4" :xl="4">-->
<!--            <div v-if="info.general.headImg" :style="'width: 130px;height: 130px;background-size: cover;border-radius: 5px;margin: auto;background-image: url('+info.general.headImg+')'"/>-->
<!--          </el-col>-->
          <el-col :sm="24" :md="12" :lg="7" :xl="7">
            <div class="ul"><span>Occupation:</span>{{ info.private.occupation }}</div>
            <div class="ul"><span>Company Name:</span>{{ info.private.companyName }}</div>
            <div class="ul"><span>Company Address:</span>{{ info.private.companyAddress }}</div>
            <div class="ul"><span>Previous Position (SAP):</span>{{ info.private.previousPosition }}</div>
          </el-col>
          <el-col :sm="24" :md="12" :lg="7" :xl="7">
            <div class="ul"><span>Position:</span>{{ info.private.position }}</div>
            <div class="ul"><span>Name of Employer:</span>{{ info.private.employerName }}</div>
            <div class="ul"><span>Supervisor Position:</span>{{ info.private.supervisorPosition }}</div>
            <div class="ul hide"><span>Bank Details:</span>{{ info.private.bankDetails }}</div>
          </el-col>
          <el-col :sm="24" :md="12" :lg="6" :xl="6">
            <div class="ul"><span>Government department:</span>{{ info.private.governmentDepartment }}</div>
            <div class="ul"><span>Leave Letter Request:</span>{{ info.private.leaveLetter }}</div>
            <div class="ul"><span>Notes:</span>{{ info.private.notes }}</div>
          </el-col>
        </el-row>

        <!-- 2 -->
        <el-row style="margin-top:1.66em;" v-if="info.private">
          <el-col :sm="24" :md="24" :lg="24" :xl="24">
            <div class="ul"><span>HKSI Athlete Number: </span>{{ info.private.athleteCode }}</div>
            <div class="ul"><span>HKSI SMC Athlete Number: </span>{{ info.private.athleteNumber }}</div>
          </el-col>
        </el-row>

        <!-- <div style="text-align: center;margin-top:20px;">
          <router-link :to="'/athletes/index'">
            <el-button type="success" size="medium">Back</el-button>
          </router-link>
        </div> -->
      </el-tab-pane>
      <el-tab-pane label="Classification" name="Classification">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @sort-change="sort_change"
        >
          <el-table-column align="center" label="Case ID" width="150" prop="id" sortable="custom">
            <template slot-scope="scope">
              <a @click="onLook(scope.row.id, 'CLASSIFICATION', scope.row.typeCode)">
                {{ scope.row.idPrefix }}
              </a>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Date Create" width="120" prop="date" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.date | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Created by" min-width="120" prop="createLastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createLastName }} {{ scope.row.createFirstName }}
            </template>
          </el-table-column>
          <el-table-column label="Sport" prop="sport" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.sportName }}
            </template>
          </el-table-column>
          <el-table-column label="Person In Charge" min-width="160" prop="pic" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.pic }}
            </template>
          </el-table-column>
          <el-table-column label="Class Status" min-width="120" prop="sportClass" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.sportClass }}
            </template>
          </el-table-column>
          <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
            </template>
          </el-table-column>
<!--          <el-table-column fixed="right" label="" width="60">-->
<!--            <template slot-scope="scope">-->
<!--              <div style="text-align: center;">-->
<!--                <a @click="onLook(scope.row.id, 'CLASSIFICATION', scope.row.typeCode)">-->
<!--                  <el-button type="text" size="small">-->
<!--                    <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                  </el-button>-->
<!--                </a>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <el-pagination
          layout="sizes, prev, pager, next"
          :page-size="listQuery.limit"
          :current-page="listQuery.page"
          :total="listQuery.total"
          class="pagination-container"
          :page-sizes="[25, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="Sport Medicine" name="SportMedicine">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @sort-change="sort_change"
        >
          <el-table-column align="center" label="Case ID" width="150" prop="id" sortable="custom">
            <template slot-scope="scope">
              <a @click="onLook(scope.row.id, 'SPORT_MEDICINE', scope.row.typeCode)">
                {{ scope.row.idPrefix }}
              </a>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Date Create" width="120" prop="publisheDate" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.publisheDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Created by" min-width="120" prop="createLastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createLastName }} {{ scope.row.createFirstName }}
            </template>
          </el-table-column>
          <el-table-column label="Category" min-width="180" prop="typeCode" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.typeCode | categoryFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Person In Charge" min-width="160" prop="pic" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.pic || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Review Session" min-width="120" prop="reviewSession" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.reviewSession | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Short Report" min-width="120" prop="shortReport" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.shortReport || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
            </template>
          </el-table-column>
<!--          <el-table-column fixed="right" label="" width="60">-->
<!--            <template slot-scope="scope">-->
<!--              <div style="text-align: center;">-->
<!--                <a @click="onLook(scope.row.id, 'SPORT_MEDICINE', scope.row.typeCode)">-->
<!--                  <el-button type="text" size="small">-->
<!--                    <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                  </el-button>-->
<!--                </a>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <el-pagination
          layout="sizes, prev, pager, next"
          :page-size="listQuery.limit"
          :current-page="listQuery.page"
          :total="listQuery.total"
          class="pagination-container"
          :page-sizes="[25, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="Sport Science" name="SportScience">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @sort-change="sort_change"
        >
          <el-table-column align="center" label="Case ID" width="150" prop="id" sortable="custom">
            <template slot-scope="scope">
              <a @click="onLook(scope.row.id, 'SPORT_SCIENCE', scope.row.typeCode)">
                {{ scope.row.idPrefix }}
              </a>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Date Create" width="120" prop="publisheDate" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.publisheDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Created by" min-width="120" prop="createLastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createLastName }} {{ scope.row.createFirstName }}
            </template>
          </el-table-column>
          <el-table-column label="Category" min-width="120" prop="category" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.category || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Person In Charge" min-width="160" prop="pic" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.pic || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Review Session" min-width="120" prop="reviewSession" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.reviewSession | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Short Report" min-width="120" prop="shortReport" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.shortReport || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
            </template>
          </el-table-column>
<!--          <el-table-column fixed="right" label="" width="60">-->
<!--            <template slot-scope="scope">-->
<!--              <div style="text-align: center;">-->
<!--                <a @click="onLook(scope.row.id, 'SPORT_SCIENCE', scope.row.typeCode)">-->
<!--                  <el-button type="text" size="small">-->
<!--                    <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                  </el-button>-->
<!--                </a>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <el-pagination
          layout="sizes, prev, pager, next"
          :page-size="listQuery.limit"
          :current-page="listQuery.page"
          :total="listQuery.total"
          class="pagination-container"
          :page-sizes="[25, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>

      <el-tab-pane label="Medication" name="Medication">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @sort-change="sort_change"
        >
          <el-table-column align="center" label="Case ID" width="150" prop="id" sortable="custom">
            <template slot-scope="scope">
              <a @click="onLook(scope.row.id, 'MEDICATION', scope.row.typeCode)">
                {{ scope.row.idPrefix }}
              </a>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Date Create" width="120" prop="createTime" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Sport" min-width="120" prop="sportName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.sportName || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Person In Charge" min-width="160" prop="pic" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.pic || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Short Report" min-width="120" prop="shortReport" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.shortReport || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
            </template>
          </el-table-column>
<!--          <el-table-column fixed="right" label="" width="60">-->
<!--            <template slot-scope="scope">-->
<!--              <div style="text-align: center;">-->
<!--                <a @click="onLook(scope.row.id, 'MEDICATION', scope.row.typeCode)">-->
<!--                  <el-button type="text" size="small">-->
<!--                    <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                  </el-button>-->
<!--                </a>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <el-pagination
          layout="sizes, prev, pager, next"
          :page-size="listQuery.limit"
          :current-page="listQuery.page"
          :total="listQuery.total"
          class="pagination-container"
          :page-sizes="[25, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>

      <el-tab-pane label="Training Record" name="tab7" v-if="isShow">
        <div class="filter-container">
          <el-date-picker

            v-model="listQuery.start"
            type="date"
            placeholder="Date Start"
            class="filter-item el-input"
            format="dd-MM-yyyy"
            value-format="yyyy-MM-dd"
            style="width: 140px"/>
          -
          <el-date-picker v-model="listQuery.end" type="date" format="dd-MM-yyyy" value-format="yyyy-MM-dd" placeholder="Date End" class="filter-item" style="width: 140px"/>
          <el-input
            v-model="listQuery.title"
            placeholder="Couse"
            style="width: 200px;"
            class="filter-item el-input"
            @keyup.enter.native="handleFilter"
          />
          <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
            Search
          </el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @sort-change="sort_change"
        >
          <el-table-column align="center" label="Sport" width="95">
            <template slot-scope="scope">
              {{ scope.row.default }}
            </template>
          </el-table-column>
          <el-table-column label="Course name" min-width="120" >
            <template slot-scope="scope">
              {{ scope.row.default }}
            </template>
          </el-table-column>
          <el-table-column label="Date" min-width="120" >
            <template slot-scope="scope">
              04/08/2018
            </template>
          </el-table-column>
          <el-table-column label="Start Time" min-width="120" >
            <template slot-scope="scope">
              17:00
            </template>
          </el-table-column>
          <el-table-column label="End Time" min-width="120" >
            <template slot-scope="scope">
              19:00
            </template>
          </el-table-column>
          <el-table-column label="Location" width="200">
            <template slot-scope="scope">
              Siu Lek Yuen
            </template>
          </el-table-column>
          <el-table-column label="Attendance" min-width="120" >
            <template slot-scope="scope">
              Present
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="" width="60">
            <template slot-scope="scope">
              <div style="text-align: center;">
                <router-link :to="'/athletes/generalInformation'">
                  <el-button type="text" size="small">
                    <img src="../../assets/images/look.svg" class="btn-icon">
                  </el-button>
                </router-link>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

      <el-tab-pane label="Result Archive" name="tab8">
        <div class="filter-container">
          <el-date-picker
            v-model="listQuery.start"
            type="date"
            placeholder="Date Start"
            class="filter-item"
            format="dd-MM-yyyy"
            value-format="yyyy-MM-dd"
            style="width: 160px"></el-date-picker> -
          <el-date-picker v-model="listQuery.end" type="date" format="dd-MM-yyyy" value-format="yyyy-MM-dd" placeholder="Date End" class="filter-item" style="width: 160px"/>
          <el-input
            v-model="listQuery.keyword"
            placeholder="Game"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
            Search
          </el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @sort-change="sort_change"
        >
          <el-table-column align="center" min-width="120" label="Sport" prop="scentSportName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.scentSportName }}
            </template>
          </el-table-column>
          <el-table-column label="Game" min-width="120" prop="competition" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.competition }}
            </template>
          </el-table-column>
          <el-table-column label="Event" min-width="120" prop="eventName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.eventName }}
            </template>
          </el-table-column>
          <el-table-column label="Class" min-width="120" prop="sceneClass" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.sceneClass }}
            </template>
          </el-table-column>
          <el-table-column label="Location" min-width="120" prop="location" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.location }}
            </template>
          </el-table-column>
          <el-table-column label="Date" width="200" prop="startDate" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.startDate | dateFormat }} to  {{ scope.row.endDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="No. of participating" min-width="120" prop="numberParticipant" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.numberParticipant }}
            </template>
          </el-table-column>
          <el-table-column label="Countries / Territories" min-width="120" prop="participatingCountry" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.participatingCountry }}
            </template>
          </el-table-column>
          <el-table-column label="Result" min-width="120" prop="result" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.result }}
            </template>
          </el-table-column>
          <el-table-column label="Medal" min-width="120" prop="awardsName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.awardsName }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="sizes, prev, pager, next"
          :page-size="listQuery.limit"
          :current-page="listQuery.page"
          :total="listQuery.total"
          class="pagination-container"
          :page-sizes="[25, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>

      <!-- <div style="text-align: center;margin-top:20px;">
        <router-link :to="'/athletes/index'">
          <el-button type="success" size="medium">Back</el-button>
        </router-link>
      </div> -->
    </el-tabs>

  </div>
</template>

<script>
    import store from '@/store'
    // import { getList, getInterList, getHonoursList, getSchedulesList } from '@/api/home'
    import { getGeneralInfoList, getPrivateInfoList, queryMedicalList } from '@/api/athletes'
    import { getMedicalUrl } from '@/utils'

    // import EditProfile from '../home/editProfile'
    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        data() {
            return {
                info: {
                    general: {},
                    userBody: {},
                    identity: {},
                    private: {},
                    statusLogs: [],
                    currentSportLog: [],
                    userStatus: 0
                },
                honoursAwards: [],
                positionQualification: [],
                listQuery: {
                    page: 1,
                    limit: 25,
                    start: '',
                    end: '',
                    sorting: '',
                    column: '',
                    total: 0,
                    keyword: '',
                    importance: undefined,
                    title: undefined,
                    type: undefined,
                    sort: '+id'
                },
                list: null,
                listLoading: true,
                infoListLoading: true,
                activeName: 'tab1',
                userType: store.getters.userType,
                isShow: false
            }
        },
        watch: {
            activeName(val) {
                this.$router.push(`${this.$route.path}?page=${val}&id=${this.query.id}`)
            }
        },
        created() {
            const query = this.$route.query
            this.query = query
            if (query.page) {
                this.activeName = query.page
            }
            this.fetchData()
        },
        methods: {
            fetchData() {
                const activeName = this.activeName
                if (activeName === 'tab2') {
                    getPrivateInfoList({ athleteId: this.query.id }).then(response => {
                        const data = response.result
                        this.info.identity = data.identity
                        this.info.private = data.private
                    })
                } else if (activeName === 'Classification' || activeName === 'SportMedicine' || activeName === 'SportScience' || activeName === 'Medication' || activeName === 'tab8') {
                    this.queryMedicalList(this.listQuery.page)
                } else {
                    this.list = []
                    this.listLoading = false
                }

                getGeneralInfoList({ athleteId: this.query.id }).then(response => {
                    const data = response.result
                    this.info.general = data.general
                    this.info.userBody = data.body
                    this.info.currentSportLog = data.currentSportLog
                    this.info.statusLogs = data.statusLogs
                    this.info.insurance = data.insurance
                    this.info.honoursAwards = data.honoursAwards
                    this.info.positionQualification = data.positionQualification
                    this.info.userStatus = parseInt(data.userStatus)
                    this.infoListLoading = false
                })
            },
            queryMedicalList(page) {
                const activeName = this.activeName
                var url = '/medical/classification/query_list'
                if (activeName === 'Classification') url = '/medical/classification/query_list'
                if (activeName === 'SportMedicine') url = '/medical/sport_medical/query_list'
                if (activeName === 'SportScience') url = '/medical/sport_science/query_list'
                if (activeName === 'Medication') url = '/medical/medication/query_list'
                if (activeName === 'tab8') url = '/athetes/archive_list'
                this.listLoading = true
                this.list = []
                const params = {
                    athleteId: this.query.id,
                    page: page,
                    size: this.listQuery.limit,
                    sorting: this.listQuery.sorting,
                    column: this.listQuery.column
                }
                if (activeName === 'tab8') {
                    Object.assign(params, { start: this.listQuery.start }, { end: this.listQuery.end }, { competition: this.listQuery.keyword })
                }
                queryMedicalList(url, params).then(response => {
                    const data = response.result
                    for (var i in data.list) {
                      data.list[i].idPrefix = this.$caseIdFormat(activeName, data.list[i].id)
                    }
                    console.log( data.list)
                    this.list = data.list
                    // Object.assign(this.info, data)
                    if (data.total > 0 && data.total !== this.listQuery.total) {
                      this.listQuery.total = data.total
                    }

                    this.listQuery.page = page
                    // console.log(this.info)
                    this.listLoading = false
                })
            },
            // pageSize变化事件
            handleSizeChange(val) {
              this.listQuery.limit = val
              this.queryMedicalList(this.listQuery.page)
            },
            // pageNum变化事件
            handleCurrentChange(page) {
                this.queryMedicalList(page)
            },
            onLook(subscribeId, subscribeType, type) {
                this.$router.push({ path: getMedicalUrl(subscribeId, subscribeType, type, this.userType) })
            },
            handleClick(tab, event) {
                this.listQuery.page = 1
                this.listQuery.total = 0
                // if ( tab.name === 'tab8') {
                //
                // }
                this.fetchData()
            },
            editClick(id) {
                this.edit = true
            },
            handleFilter() {
                this.listQuery.page = 1
                this.fetchData()
            },
            sort_change(column) {
                this.listQuery.page = 1
                if (column.prop && column.order) {
                    this.listQuery.sorting = column.order === 'ascending' ? 0 : 1
                    this.listQuery.column = column.prop
                    this.queryMedicalList(1)
                }
                // this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
            },
            onSubmit() {
                this.$message('Save!')
                this.edit = false
            }
        }
    }
</script>
<style>
  .home-profile .at span{color: #586982;margin-right: 20px;}
  .basic-table{}
</style>
